.box_1 {
  width: 100%;
  height: 100%;
  padding: 10px;
  background-size: 100% 100%;

  .header {
    width: 100%;
    height: 40px;
    line-height: 40px;
    text-align: center;
    background-size: 100% 100%;
    font-family: font_zh_en;

    .text {
      width: 50%;
      height: 40px;
      font-size: 28px;
      font-weight: bold;
      color: #fff;
      margin: 0 auto;
      cursor: pointer;
    }
  }

  .content_box {
    width: 100%;
    height: calc(100% - 50px);
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    padding: 10px;

    .content_item_box { 
      width: 32%;
      height: 100%;

      .left_box, .right_box {
        width: 100%;
        height: 49%;
        background-size: 100% 100%;
        cursor: pointer;
        padding: 3px;
        box-sizing: border-box;
        position: relative;
        

        .title { 
          width: 100%; 
          height: 9%; 
          position: relative;

          span {
            color: var(--main-color);
            font-size: 18px; 
            font-weight: bold; 
            cursor: pointer; 
            position: absolute;
            bottom: 0;
            left: 20px;
          }
        }

        .chart {
          width: 100%;
          height: 100%;
          position: relative;
          top: -8%;
        }

        .info_box {
          width: 100%;
          height: 91%;
          overflow-y: auto;
          .item { 
            width: 90%; 
            height: 40px; 
            line-height: 40px; 
            text-align: left; 
            margin-left: 40px; 
            font-size: 20px; 
            color: #fff;
          }
        }
        .info_box::-webkit-scrollbar {
          width: 0px;
          height: 100%;
          background-color: #f5f5f5;
        }

        .info_box::-webkit-scrollbar-thumb {           
          border-radius: 10px;
          background: #2366fc;
        }

        // 牧户动物统计 文本
        .state_text {
          width: 100%;
          height: 100%;
          overflow-y: auto;
          margin-bottom: 20px;

          .info_box {
            width: 100%;
            height: calc(100% - 30px);
            overflow-y: auto;
            .item { width: 90%; height: 40px; line-height: 40px; text-align: left; margin-left: 40px; font-size: 20px; color: #fff; }
          }
          .info_box::-webkit-scrollbar {
            width: 0px;
            height: 100%;
            background-color: #f5f5f5;
          }

          .info_box::-webkit-scrollbar-thumb {           
            border-radius: 10px;
            background: #2366fc;
          }
        }
      }

      .left_box:nth-child(2) {
        margin-top: 20px;
      }

      .right_box { 
        .title { 
          width: 100%; 
          height: 9%; 
          text-align: right; 
          position: relative;

          span {
            color: var(--main-color);
            font-size: 18px; 
            font-weight: bold; 
            cursor: pointer; 
            position: absolute;
            bottom: 0;
            right: 20px;
          }
        }

        .grow_box {
          white-space: nowrap;
          overflow-x: auto;
          overflow-y: hidden;
          text-align: center;
          padding: 5px;

          .grow_name { 
            margin-right: 10px;
            white-space: nowrap;
            display: inline-block;
            color: #fff;
          }
        }
        .grow_box::-webkit-scrollbar {
          width: 0px;
          height: 100%;
          background-color: #f5f5f5;
        }
        
        .grow_box::-webkit-scrollbar-track {                 // 表示横向向滚动块
          border-radius: 10px;
          background: #2366fc;
        }

        .chart {
          width: 100%;
          height: 100%;
          position: relative;
          top: -10%;
        }
      }
      .right_box:nth-child(2) { margin-top: 20px; }

      .center_box {
        width: 100%;
        height: 100%;
        // padding-top: 7%;
        // border: 1px solid #fff;
      }

      // =========== 地图 =========
      .map_box {
        width: 100%;
        height: 40%;
        position: relative;
        // border: 1px solid #f00;

        .map { width: 120%; height: 120%; position: relative; top: 0px; left: 0px; }
        .tian_map { width: 100%; height: 102%; position: relative; top: 15px; left: 0px; }
        .avatar { 
          width: 70%; height: 70%; position: relative; top: 15px; left: 0px; 
          position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
          img { width: 100%; height: 100%; }
        }
      }

      // 苏木面积文本
      .context_box {
        width: 100%;
        height: 10%;
        text-indent: 2em;
        margin-top: 20px;
        color: #fff;
        font-size: 16px;
        line-height: 25px;
        position: relative;
        top: 5px;
        // border: 1px solid #f00;
      }

      // ============= 单个图表 ===========
      .bottom_box {
        width: 100%;
        height: 48%;
        // border: 1px solid #f00;
        // margin-top: 10px;

        .title { 
          width: 100%; 
          height: 10%; 
          position: relative;

          span {
            color: var(--main-color);
            font-size: 18px; 
            font-weight: bold; 
            cursor: pointer; 
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
          }
        }

        .chart {
          width: 100%;
          height: 100%;
          position: relative;
          top: -8%;
        }

        // 牧户动物统计 文本
        .state_text {
          width: 100%;
          height: 100%;
          overflow-y: auto;
          margin-bottom: 20px;

          .info_box {
            width: 100%;
            height: calc(100% - 30px);
            overflow-y: auto;
            .item { width: 90%; height: 40px; line-height: 40px; text-align: left; margin-left: 40px; font-size: 20px; color: #fff; }
          }
          .info_box::-webkit-scrollbar {
            width: 0px;
            height: 100%;
            background-color: #f5f5f5;
          }

          .info_box::-webkit-scrollbar-thumb {           
            border-radius: 10px;
            background: #2366fc;
          }
        }
      }

      // ============= 两列 ===========
      .bottom_2_box {
        width: 100%;
        height: 47%;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;

        .bottom_left_box {
          width: 45%;
          height: 100%;
          background-size: 100% 100%;
          cursor: pointer;
          margin-top: 10px;
          padding: 0;

          .title { 
            width: 100%; 
            height: 9%; 
            text-align: center; 
            position: relative;

            span {
              color: var(--main-color);
              font-size: 16px; 
              font-weight: bold; 
              cursor: pointer; 
              position: absolute;
              bottom: 0;
              left: 50%;
              transform: translateX(-50%);
            }
          }
          .item_box {
            width: 100%;
            height: calc(100% - 40px);
            margin-top: 2%;
            
            overflow-y: auto;
            .item { width: 100%; height: 30px; line-height: 30px; text-align: center; font-size: 18px; color: #fff; }
          }
          .item_box::-webkit-scrollbar {
            width: 0px;
            height: 100%;
            background-color: #f5f5f5;
          }

          .item_box::-webkit-scrollbar-thumb {                 
            border-radius: 10px;
            background: #2366fc;
          }
        }
        .left_box::-webkit-scrollbar {
          width: 0px;
          height: 100%;
          background-color: #f5f5f5;
        }

        .left_box::-webkit-scrollbar-thumb {               
          border-radius: 10px;
          background: #2366fc;
        }

        .bottom_right_box {
          width: 45%;
          height: 100%;
          background-size: 100% 100%;
          cursor: pointer;
          margin-top: 10px;

          .title { 
            width: 100%; 
            height: 9%; 
            text-align: center; 
            position: relative;

            span {
              color: var(--main-color);
              font-size: 16px; 
              font-weight: bold; 
              cursor: pointer; 
              position: absolute;
              bottom: 0;
              left: 50%;
              transform: translateX(-50%);
            }
          }

          .item_box {
            width: 100%;
            height: calc(100% - 40px);
            margin-top: 2%;

            overflow-y: auto;
            .item { width: 100%; height: 30px; line-height: 30px; text-align: center; font-size: 18px; color: #fff; }
          }
          .item_box::-webkit-scrollbar {
            width: 0px;
            height: 100%;
            background-color: #f5f5f5;
          }
          .item_box::-webkit-scrollbar-thumb {                
            border-radius: 10px;
            background: #2366fc;
          }
        }
      }

      // ============ 排行 ==========
      .pai_hang {
        width: 100%;
        height: 100%;
        background-size: 100% 100%;
        position: relative;

        .title { 
          width: 100%;
          height: 5%;
          text-align: center;
          position: relative;
          
          span {
            color: var(--main-color);
            font-weight: bold;
            font-size: 18px;
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
          }
        }

        .tab_box {
          width: 100%;
          height: 40px;
          line-height: 40px;
          font-size: 18px;
          padding: 0 20px;

          display: flex;
          gap: 10px;
          flex-direction: row;
          justify-content: space-around;
          align-items: center;

          .tab_item {
            color: #fff;
            cursor: pointer;
            text-align: center;
          }
        }

        .list_box {
          width: 100%;
          height: calc(100% - 130px);
          overflow: auto;

          .list_item {
            width: 100%;
            height: 30px;
            line-height: 30px;
            font-size: 18px;
            padding: 0 20px;
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-items: center;
            color: #fff;

            span { width: 30px; text-align: left; }
            .name { width: 35%; cursor: pointer; text-align: center; }   
            .bgc { 
              width: 25%; height: 15px; border: 1px solid #fff; 

              .c { height: 100%; background-color: #2366fc; }
            }
            .value { width: 20%; text-align: right;}
          }
        }
        .list_box::-webkit-scrollbar {
          width: 0px;       // 自定义滚动条样式
          height: 100%;
          background-color: #f5f5f5;
        }

        ::-webkit-scrollbar-thumb {           
          border-radius: 10px;
          background: #2366fc;
        }

        .unit { position: absolute; bottom: 10px; right: 10px; color: #fff; }
      }

      // ============ 牧户列表 =========
      .mu_hu_list {
        width: 100%;
        height: 100%;

        .title { 
          width: 100%;
          height: 5%;
          text-align: center;
          position: relative;
          
          span {
            color: var(--main-color);
            font-weight: bold;
            font-size: 18px;
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
          }
        }

        .tab_box {
          width: 100%;
          height: 60px;
          line-height: 60px;
          font-size: 18px;
          padding: 0 20px;

          display: flex;
          flex-direction: row;
          justify-content: space-around;
          align-items: center;

          .tab_item {
            flex: 1;
            color: #fff;
            cursor: pointer;
          }
        }

        .list_box {
          width: 100%;
          height: calc(100% - 130px);
          overflow: auto;
          margin-top: 10px;

          .list_item {
            width: 100%;
            height: 30px;
            line-height: 30px;
            font-size: 22px;
            padding: 0 20px;
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-items: center;
            color: #fff;

            span { width: 40px; }
            .name { width: 40%; cursor: pointer; }   
            .bgc { 
              width: 40%; height: 15px; border: 1px solid #fff; 

              .c { height: 100%; background-color: #2366fc; }
            }
            .value { width: 50%; }
          }
        }
        .list_box::-webkit-scrollbar {
          width: 0px;
          height: 100%;
          background-color: #f5f5f5;
        }

        ::-webkit-scrollbar-thumb {                 // 表示纵向滚动块
          border-radius: 10px;
          background: #2366fc;
        }
      }

      // ============ 牧户列表 =========
      .yu_zhong_yuan_list {
        width: 100%;
        height: 100%;

        .title { 
          width: 100%;
          height: 5%;
          text-align: center;
          position: relative;
          
          span {
            font-weight: bold;
            font-size: 18px;
            color: #fff;
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
          }
        }

        .list_box {
          width: 100%;
          height: calc(100% - 130px);
          overflow: auto;
          margin-top: 10px;

          .list_item {
            width: 100%;
            height: 30px;
            line-height: 30px;
            font-size: 20px;
            padding: 0 10px;
            display: flex;
            gap: 5;
            color: #fff;

            span { width: 60px; }
            .name { width: 30%; cursor: pointer; }   
            .value1 { width: 25%; }
            .value2 { width: 25%; }
            .value3 { width: 20%; }
            .value4 { width: 20%; }
          }
        }
        .list_box::-webkit-scrollbar {
          width: 0px;
          height: 100%;
          background-color: #f5f5f5;
        }

        ::-webkit-scrollbar-thumb {                 // 表示纵向滚动块
          border-radius: 10px;
          background: #2366fc;
        }
      }

      // ============ 苏木列表 ==========
      .su_mu_list {
        width: 100%;
        height: 100%;

        .title { 
          width: 100%;
          height: 5%;
          text-align: center;
          position: relative;
          
          span {
            color: var(--main-color);
            font-weight: bold;
            font-size: 18px;
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
          }
        }

        .tab_box {
          width: 100%;
          height: 60px;
          line-height: 60px;
          font-size: 18px;
          padding: 0 20px;

          display: flex;
          flex-direction: row;
          justify-content: space-around;
          align-items: center;

          .tab_item {
            flex: 1;
            color: #fff;
            cursor: pointer;
          }
        }

        .list_header {
          display: flex;
          flex-direction: row;
          justify-content: space-around;
          padding: 0 10px;
          .num { width: 40px; font-size: 18px; }
          .village_name {  width: calc(100% - 40px); text-align: center; font-size: 18px; }
        }

        .list_box {
          width: 100%;
          height: calc(100% - 130px);
          overflow: auto;
          margin-top: 10px;

          .list_item {
            width: 100%;
            height: 30px;
            line-height: 30px;
            font-size: 22px;
            padding: 0 20px;
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-items: center;
            color: #fff;

            span { width: 40px; font-family: font_number; }
            .name { width: calc(100% - 40px); cursor: pointer; text-align: center; }   
          }
        }
        .list_box::-webkit-scrollbar {
          width: 0px;
          height: 100%;
          background-color: #f5f5f5;
        }

        ::-webkit-scrollbar-thumb {                 // 表示纵向滚动块
          border-radius: 10px;
          background: #2366fc;
        }
      }

      // ============ 动物列表 =======
      .cattle_list {
        width: 100%;
        height: 100%;

        .title { 
          width: 100%;
          height: 5%;
          text-align: center;
          position: relative;
          
          span {
            font-weight: bold;
            font-size: 18px;
            color: #fff;
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
          }
        }

        .tab_box {
          width: 100%;
          height: 60px;
          line-height: 60px;
          font-size: 18px;
          padding: 0 20px;

          display: flex;
          flex-direction: row;
          justify-content: space-around;
          align-items: center;

          .tab_item {
            flex: 1;
            color: #fff;
            cursor: pointer;
          }
        }

        .list_box {
          width: 100%;
          height: calc(100% - 60px);
          overflow: auto;

          .list_item {
            width: 100%;
            padding: 10px;
            color: #fff;
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-items: center;
            cursor: pointer;
          }
        }
        .list_box::-webkit-scrollbar {
          width: 0px;
          height: 100%;
          background-color: #f5f5f5;
        }

        ::-webkit-scrollbar-thumb {                 // 表示纵向滚动块
          border-radius: 10px;
          background: #2366fc;
        }
      }
    }
  }
}

@media screen and (min-width: 1400px) and (max-width: 1599px) {
  .context_box {
    font-size: 14px !important;
    line-height: 21px !important;
    top: -25px !important;
  }
}

@media screen and (min-width: 1200px) and (max-width: 1399px) {
  .context_box {
    font-size: 15px !important;
    line-height: 21px !important;
    top: -25px !important;
  }
}
